<template>
  <el-card>
    <el-form :model="search">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="名称:">
            <el-input v-model="search.name" clearable placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="陪玩类型:">
            <el-select v-model="search.type" clearable multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="陪玩费用:">
            <el-input-number v-model="search.cost" :min="1" :controls="false">
              <template #suffix>
                <span>/局</span>
              </template>
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="3"><el-button type="primary">查询</el-button></el-col>
        <el-col :span="6"><el-button type="primary">新增</el-button></el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      size="small"
      tooltip-effect="light"
      style="width: 100%; margin-top: 10px"
      height="calc(100vh -)"
    >
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="source" label="来源" />
      <el-table-column label="陪玩介绍" align="center">
        <el-table-column prop="type" label="陪玩类型" />
        <el-table-column prop="voice" label="声音类别" />
        <el-table-column prop="cost" label="陪玩费用" />
        <el-table-column prop="capacity" label="技术能力" />
        <el-table-column prop="level" label="陪玩等级" />
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <Pagination
      :pageSizes="[10, 20, 30, 50]"
      :total="pager.total"
      :page="pager.current"
      :limit="pager.size"
      @pagination="getTableData"
    ></Pagination>

    <addOrEdit></addOrEdit>
  </el-card>
</template>

<script setup lang="ts">
import addOrEdit from './addOrEdit.vue'
import { ref, } from 'vue'
const defaultForm = {
  name: '',
  type: [],
  cost: null,
}
const pager = ref({
  total: 0,
  current: 1,
  size: 10,
})
const search = ref({ ...defaultForm })
const tableData = ref([])
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const getTableData = (payload: { page: number; limit: number }) => {
  console.log(payload, '=========ces')
}
</script>

<style scoped lang="scss"></style>
